/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:26:01
 */

import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import styles from "./toolVerticalFlip.module.less";
import verticalFlipSVG from "./verticalFlip.svg";
import verticalFlip_hoverSVG from "./verticalFlip_hover.svg";


interface Iprops {
}

// 上下翻转
export default function ToolVerticalFlip() {

    const [hover, setHover] = useState(false);
    const [visible, setVisible] = useState(false);
    const [disable, setDisable] = useState(false);

    useEffect(() => autorun(() => {
        const { activeObjectId } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject) {
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    return (
        <Tooltip
            title="上下翻转(Alt + .)"
            placement="top"
            mouseLeaveDelay={0}
            mouseEnterDelay={0.5}
        >
            <div
                onClick={() => {
                    designTemplateEditor.flipY();
                }}
                onMouseEnter={() => {
                    setHover(true);
                }}
                onMouseLeave={() => {
                    setHover(false);
                }}
                className={clsx(styles.toolVerticalFlip, visible && styles.visible)}
            >
                <img className={styles.icon} src={hover ? verticalFlip_hoverSVG : verticalFlipSVG} alt="" />
            </div>
        </Tooltip>
    );

}